<template>
  <div :class="{'modal-container': true, 'active': isActive}" v-if="show" @click="modalClick">
    <div :class="{'modal': true, 'active': isActive}">
      <span class="modal-title">{{ title }}</span>
      <span class="modal-content">{{ content }}</span>
      <div class="modal-button-container">
        <span class="modal-button" @click="cancelClick">{{ cancelText }}</span>
        <span class="modal-button active" @click="confirmClick">{{ confirmText }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "modal",
  data() {
    return {
      isActive: false,
      timeInterval: 250,
      show: true,
      closeOnClickModal: false,
      title: "",
      content: "",
      cancelText: "",
      confirmText: "",
      confirmFunction: function() {},
      cancelFunction: function() {}
    };
  },
  mounted() {
    setTimeout(() => {
      this.isActive = true;
    }, 100);
  },
  methods: {
    modalClick(){
      if (this.closeOnClickModal) this.hide();
    },
    cancelClick() {
      this.hide();
      if (this.cancelFunction) this.cancelFunction(this.cancelText);
    },
    confirmClick() {
      this.hide();
      if (this.confirmFunction) this.confirmFunction(this.confirmText);
    },
    hide() {
      this.isActive = false;
      setTimeout(() => {
        this.show = false;
      }, this.timeInterval);
    }
  },
};
</script>
<style scoped>
.modal-container {
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.modal-container.active{
  opacity:1;
}
.modal {
  width: 7.733333rem;
  background-color: white;
  border-radius: 0.2rem;
  overflow: hidden;
  transform: scale(0,0);
  transition: all 0.25s ease-out;
}
.modal.active{
  transform: scale(1,1);
}
.modal-title {
  display: block;
  width: 100%;
  height: 1.333333rem;
  line-height: 1.333333rem;
  text-align: center;
  font-size: 0.4rem;
  font-weight: bold;
}
.modal-content {
  display: block;
  font-size: 0.333333rem;
  color: #6a6a6a;
  text-align: center;
  padding: 0 0.4rem;
}
.modal-button-container {
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
}
.modal-button {
  width: 50%;
  line-height: 1.066667rem;
  text-align: center;
  background-color: #eeeeee;
}
.modal-button.active {
  background-color: #fe0000;
  color: white;
}
</style>